<template>
    <view class="bg-[#EAEAEA] min-h-screen">
        <view class="flex items-center p-[20rpx]">
            <view class="flex items-center ml-[20rpx]">广西<u-icon name="arrow-down" color="#000" size="18"></u-icon>
            </view>
            <view class="flex items-center ml-[20rpx]">南宁<u-icon name="arrow-down" color="#000" size="18"></u-icon>
            </view>
            <view class="flex items-center ml-[20rpx]">青秀区<u-icon name="arrow-down" color="#000" size="18"></u-icon>
            </view>
        </view>
        <view class="bg-white px-[20rpx] py-[30rpx]">
            <view class="text-[36rpx] pt-[20rpx] flex justify-around">

                <text class="text-[#FD755D] border-b-[5rpx] border-[#FD755D] font-bold">学校课程</text>
                <text class="  text-[#434141] ">社区课程</text>
                <text class="  text-[#434141] ">校外课程</text>
            </view>
            
            <uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
                @monthSwitch="monthSwitch" />
            <view class="p-[20rpx] border-b border-t border-[#EBEBEB]">
                <view class="flex justify-between">
                    <view class="flex items-center">
                        <view class="bg-[#00B578] w-[28rpx] h-[28rpx] rounded-full"></view>已完成
                    </view>
                    <view class="flex items-center">
                        <view class="bg-[#979797] w-[28rpx] h-[28rpx] rounded-full"></view>已过期
                    </view>
                    <view class="flex items-center">
                        <view class="bg-[#FD755D] w-[28rpx] h-[28rpx] rounded-full"></view>进行中
                    </view>
                    <view class="flex items-center">
                        <view class="bg-[#0095FF] w-[28rpx] h-[28rpx] rounded-full"></view>未执行
                    </view>
                    <view class="flex items-center">
                        <view class="bg-[#FFB200] w-[28rpx] h-[28rpx] rounded-full"></view>未结课
                    </view>
                </view>

                <view class="py-[20rpx] flex justify-around">
                    <view>已完成 8</view>
                    <view>已过期 2</view>
                    <view>进行中 9</view>
                    <view>未执行 4</view>

                </view>
            </view>
            <view class="px-[30rpx] text-center py-[20rpx] border-b border-[#EFEFEF]">
                提醒：下次课是在<text class="text-[#FF664A]">青秀区老年大学七星社区教学点XXXXX地址</text>，上课班级是<text class="text-[#FF664A]">XXXXXX班</text>，上课时间<text class="text-[#FF664A]">2024-12-12 10:00</text>，请按时到岗。
            </view>
            <view class="my-[30rpx] text-center">距离下次上课还有<text class="text-[#FF664A]">XXX小时XXX分钟</text></view>
            <view class="py-[20rpx] flex justify-around items-center text-[34rpx]">
                <view @click="navigateTo('/pages/courseDataManagement/attendanceinquiry')"  class="w-[286rpx] h-[76rpx] flex items-center justify-center rounded-[167rpx] text-[#FF664A] bg-[#ffe3df]">考勤查询
                </view>
                <view @click="navigateTo('/pages/courseDataManagement/courseInquiry')" class="w-[286rpx] h-[76rpx] flex items-center justify-center  rounded-[167rpx] text-[#FF664A] bg-[#ffe3df]">课程查询
                </view>

            </view>
        </view>

    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';

const info = ref({
    lunar: true,
    range: true,
    insert: false,
    selected: []
})
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
</script>